<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Sign in</title>
		<link rel="stylesheet" type="text/css" th:href="@{../static/css/login.css}" />
	</head>
	<body>
		<div id="login-box">
			<h1>登&nbsp;录</h1>
			<form action="/login/verify" class="login-form" method="post" name="logForm">
			<div class="input-box">
				<span>用户名</span>
				<input type="text" placeholder="请输入您的用户名" name="username" />
			</div>
			<div class="input-box">
				<span>密&emsp;码</span>
				<input type="password" placeholder="请输入您的密码" name="password" />
			</div>
			<div class="input-box">
				<span>验证码</span>
				<input type="text" style="width: 50px" id="inputyzm" />&nbsp;&nbsp;&nbsp;
				<span id="yzm" onclick="hyzm()"></span>
			</div>
			<input type="button" id="login" onclick="clickLogbtn()" value="点击登录"></input>
			</form>
			<br/>
			<div class="register"><a th:href="@{/login/toRegister}">没有账号？立即注册</a></div>
		</div>


	<script>
		//页面加载时，生成随机验证码
		window.onload=function(){
			createCode(6);
		}

		var logbtn = document.getElementById("login");
		var clickLogbtn = function (){
			console.log("尝试提交");
			if(validateCode()){
				document.logForm.submit();
			}else {
				createCode(6);
			}
		}

		var hyzm = function (){
			createCode(6);
		}

		//生成验证码的方法
		function createCode(length) {
			var code = "";
			var codeLength = parseInt(length); //验证码的长度
			var checkCode = document.getElementById("yzm");
			var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
					'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
			//循环组成验证码的字符串
			for (var i = 0; i < codeLength; i++)
			{
				//获取随机验证码下标
				var charNum = Math.floor(Math.random() * 62);
				//组合成指定字符验证码
				code += codeChars[charNum];
			}
			if (checkCode)
			{
				//为验证码区域添加样式名
				checkCode.className = "code";
				//将生成验证码赋值到显示区
				checkCode.innerHTML = code;
			}
		}

		//检查验证码是否正确
		function validateCode()
		{
			//获取显示区生成的验证码
			var checkCode = document.getElementById("yzm").innerHTML;
			//获取输入的验证码
			var inputCode = document.getElementById("inputyzm").value;
			//console.log(checkCode);
			//console.log(inputCode);
			if (inputCode.length <= 0)
			{
				//alert("请输入验证码！");
				return false;
			}
			else if (inputCode.toUpperCase() != checkCode.toUpperCase())
			{
				//alert("验证码输入有误！");
				//createCode(6);
				return false;
			}
			else
			{
				//alert("验证码正确！");
				return true;
			}
		}
	</script>
	</body>
</html>

